<template>
    <div ref="main" class="main"></div>
    <div ref="main2" class="main2"></div>
    <div ref="main3" class="main3"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

onMounted(() => {
    initChart()
    initChart2()
    initChart3()
})

const main = ref()
const main2 = ref()
const main3 = ref()

const initChart = () => {
    let myChart = echarts.init(main.value);
    let option = {
        title: [
            {
                left: 'center',
                text: '一个简单的折线图'
            }
        ],
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} kW·h'
            },
        },
        grid: [
            {
                top: '15%',
                left: '14%',
                bottom: '10%',
                right: '5%'
            },
        ],
        series: [
            {
                type: 'line',
                data: [150, 230, 224, 218, 135, 147, 260],
                smooth: true,
                // areaStyle: {},
                symbol: 'triangle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                // showSymbol: false,
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                },
            },
        ]
    };
    myChart.setOption(option);
}

const initChart2 = () => {
    let myChart = echarts.init(main2.value);

    let option = {
        title: [
            {
                left: 'center',
                text: '面积图的颜色渐变',
                textStyle: {
                    color: '#fff'
                }
            }
        ],
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
            boundaryGap: false, // x轴两边是否留白
            // 坐标轴轴线
            axisLine: {
                lineStyle: {
                    color: '#fff',
                    opacity: 0.6
                }
            },
            // 坐标轴刻度
            axisTick: {
                show: false
            },
            // 坐标轴文本
            axisLabel: {
                show: true,
                color: "rgba(255, 255, 255, 0.6)"
            }
        },
        yAxis: {
            // 坐标轴分割线
            splitLine: {
                lineStyle: {
                    color: ['#fff'],
                    opacity: 0.1
                }
            },
            // 坐标轴文本
            axisLabel: {
                show: true,
                color: "rgba(255, 255, 255, 0.6)"
            }
        },
        grid: {
            top: '15%',
            left: '10%',
            right: '5%',
            bottom: '10%'
        },
        series: [
            {
                type: 'line',
                showSymbol: false,
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                smooth: true,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: 'rgba(255, 179, 0, 0.3)' // 0% 处的颜色
                        }, {
                            offset: 0.33, color: 'rgba(255, 160, 0, 1)' // 33% 处的颜色
                        }, {
                            offset: 0.66, color: 'rgba(254, 219, 0, 1)' // 66% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(254, 196, 0, 0.3)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(255, 160, 0, 0.3)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(254, 196, 0, 0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            }
        ]
    };

    myChart.setOption(option);
}

const initChart3 = () => {
    let myChart = echarts.init(main3.value);

    let option = {
        title: [
            {
                left: 'center',
                text: '双折线图的线性渐变',
                textStyle: {
                    color: '#fff'
                }
            }
        ],
        tooltip: {
            trigger: 'axis'
        },
        // 图例
        legend: {
            top: '9%',
            data: ['售价', '进价'],
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: {
            data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
            boundaryGap: false, // x轴两边是否留白
            // 坐标轴轴线
            axisLine: {
                lineStyle: {
                    color: '#fff',
                    opacity: 0.6
                }
            },
            // 坐标轴刻度
            axisTick: {
                show: false
            },
            // 坐标轴文本
            axisLabel: {
                show: true,
                color: "rgba(255, 255, 255, 0.6)"
            }
        },
        yAxis: {
            // 坐标轴分割线
            splitLine: {
                lineStyle: {
                    color: ['#fff'],
                    opacity: 0.1
                }
            },
            // 坐标轴文本
            axisLabel: {
                show: true,
                color: "rgba(255, 255, 255, 0.6)"
            }
        },
        grid: {
            top: '20%',
            left: '10%',
            right: '5%',
            bottom: '10%'
        },
        series: [
            {
                name: '售价',
                type: 'line',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                symbolSize: 6,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: 'rgba(255, 179, 0, 0.3)' // 0% 处的颜色
                        }, {
                            offset: 0.33, color: 'rgba(255, 160, 0, 1)' // 33% 处的颜色
                        }, {
                            offset: 0.66, color: 'rgba(254, 219, 0, 1)' // 66% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(254, 196, 0, 0.3)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            },
            {
                name: '进价',
                type: 'line',
                data: [900, 832, 701, 834, 1090, 1500, 1120],
                symbolSize: 6,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: 'rgba(0, 243, 255, 0)' // 0% 处的颜色
                        }, {
                            offset: 0.33, color: 'rgba(0, 241, 255, 1)' // 33% 处的颜色
                        }, {
                            offset: 0.66, color: 'rgba(0, 147, 254, 1)' // 66% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(0, 228, 254, 0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            }
        ]
    };

    myChart.setOption(option);
}

</script>

<style lang="less" scoped>
.main {
    width: 500px;
    height: 300px;
    margin: 10px;
    display: inline-block;
}

.main2,
.main3 {
    display: inline-block;
    width: 500px;
    height: 300px;
    background-color: #102A49;
    margin: 10px;
}
</style>